<template>
  <div class="navigation-page">
    <div class="navigation-header">
      <div class="navigation-header-left">
        <div class="logo">
          <img src="../../../static/images/bgc/logo.png" alt="">
          <!--<div class="logo-go">-->
            <!--<img src="../../../static/images/bgc/logo-blue.png" alt="">-->
          <!--</div>-->
          <!--<div class="logo-shu">-->
            <!--<img src="../../../static/images/bgc/fgx.png" alt="">-->
          <!--</div>-->
          <!--<div class="logo-title">-->
            <!--<img src="../../../static/images/bgc/wz.png" alt="">-->
            <!--<img src="../../../static/images/bgc/yw.png" alt="">-->
          <!--</div>-->
        </div>
        <!--<div class="title">欢迎您进入应用选择导航</div>-->
      </div>
      <div class="navigation-header-right">
        <span class="user">{{userInfo.name}}</span>
        <el-dropdown @command="outSide" trigger="click">
          <span class="outUser icon-caidan07 iconfont"></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="editPwd">修改密码</el-dropdown-item>
            <el-dropdown-item command="goOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="navigation-body">
      <el-carousel :interval="4000" type="card" :autoplay="false" class="navigation-banner">
        <el-carousel-item v-for="(item,index) in appList" :key="index">
          <div class="appInfo">
            <div class="counter">
              <div>{{index+1}}/{{appList.length}}</div>
            </div>
            <div class="app-name">
              <div>{{item.name}}</div>
            </div>
            <div class="go-in">
              <div @click="getAppChild(item)">点击进入</div>
            </div>
            <!--<span>{{item.name}}</span>-->
          </div>
        </el-carousel-item>
      </el-carousel>
      <el-tooltip class="item" effect="dark" content="返回" placement="top-start">
        <div class="icon-backward iconfont go-back" @click="goBack"></div>
      </el-tooltip>
    </div>
    <el-dialog title="修改密码" :visible="editPwddialog" width="25%" @close="editPwdClose">
      <el-form label-width="80px" :model="addPwdform" :rules="addPwdrules" ref="editPwdform">
        <el-form-item label="原始密码" prop="oldPwd">
          <el-input v-model="addPwdform.oldPwd" placeholder="请输入原始密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input v-model="addPwdform.newPwd" placeholder="请输入新密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="重复密码" prop="againPwd">
          <el-input v-model="addPwdform.againPwd" placeholder="请再次输入密码" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editPwdCancel">取消</el-button>
        <el-button type="warning" @click="editPwdKeep">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>


  export default {

    components: {
      // name
    },
    name: "navigationPageView",
    props: {
      userInfo: {
        type: Object,
        default: {}
      },
      appList: {
        type: Array,
        default: []
      },
      editPwddialog: {
        type: Boolean,
        default: false
      },
      addPwdform: {
        type: Object,
        default: {}
      }
    },
    filters: {},
    computed: {},
    watch: {},
    data() {
      return {
        addPwdrules: {
          oldPwd: [
            {required: true, message: '请输入原始密码', trigger: 'blur'}
          ],
          newPwd: [
            {required: true, message: '请输入新密码', trigger: 'blur'}
          ],
          againPwd: [
            {required: true, message: '请再次输入密码', trigger: 'blur'}
          ]
        }
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      outSide(command) {
        this.$emit("outSide", command);
      },
      getAppChild(childInfo) {
        this.$emit("getAppChild", childInfo);
      },
      goBack() {
        this.$emit("goBack");
      },
      editPwdClose() {
        this.$emit('editPwdClose');
      },
      editPwdCancel() {
        this.$emit('editPwdCancel');
      },
      editPwdKeep() {
        this.$emit('editPwdKeep');
      }
    },
    destroyed() {

    }
  }
</script>

<style scoped lang="less">
  @import url("./navigationPage");
</style>
